<template>
	<div class="menu-page">
		<div class="top-group">
			<div class="top-select" @click="showArea = true">
				<p v-if="curArea.title">{{ curArea.title }}</p>
				<van-icon name="arrow-down" />
			</div>
			<div class="top-select" @click="showHospital = true">
				<p v-if="curHospital.title">{{ curHospital.title }}</p>
				<van-icon name="arrow-down" />
			</div>
		</div>
		<div class="table-top">
			<div>客户名称</div>
			<div>
				账单月份
				<!-- <img v-if="order_direction=='desc'" src="@/assets/images/img_12.png" alt="" class="icon">
                <img v-else src="@/assets/images/img_12_a.png" alt="" class="icon"> -->
			</div>
			<div>账单编号</div>
			<div>未收款</div>
			<div>操作</div>
		</div>
		<div class="table-wrapper">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadPage">
				<div class="table-row" v-for="item in list" :key="item.id">
					<div v-if="item.hospital">{{ item.hospital.title }}</div>
					<div v-if="item.year && item.month">{{ item.year }}年{{ item.month }}月</div>
					<div>{{ item.order_sn }}</div>
					<div @click="handleGoView(item)">￥{{ item.no_pay }}</div>
					<div style="color: #50b1c1;" @click="handleDetail(item)">核销</div>
				</div>
			</van-list>
			<div class="table-row-tool">
				<div>汇总</div>
				<div>￥{{ total }}</div>
			</div>
		</div>
		<van-popup v-model="showArea" position="bottom">
			<van-picker title="选择区域" show-toolbar :columns="areaList" @confirm="onConfirmArea" @cancel="showArea = false">
				<template #option="option">
					{{ option.title }}
				</template>
			</van-picker>
		</van-popup>
		<van-popup v-model="showHospital" position="bottom">
			<van-search v-model="hospitalSearch" placeholder="请输入搜索关键词" />
			<van-picker title="选择客户" show-toolbar :columns="getHospitalList" @confirm="onConfirmHospita" @cancel="showHospital = false">
				<template #option="option">
					{{ option.title }}
				</template>
			</van-picker>
		</van-popup>
	</div>
</template>
<script>
	export default {
		name: "MenuPage",
		data() {
			return {
				order_field: "month",
				order_direction: "desc",
				page: 1,
				loading: true,
				total: 0,
				finished: false,
				list: [],
				showArea: false,
				area_id: "",
				curArea: {
					id: "",
					title: "全部区域",
				},
				areaList: [
					{
						id: "",
						title: "全部区域",
					},
				],
				showHospital: false,
				hospitalSearch: "",
				hospital_id: "",
				curHospital: {
					id: "",
					title: "所有客户",
				},
				hospitalList: [
					{
						id: "",
						title: "所有客户",
					},
				],
			};
		},
		mounted() {
			this.getArea();
			this.getHospitals();
			this.onLoad();
		},
		computed: {
			getHospitalList() {
				if (this.hospitalSearch.length === 0) {
					return this.hospitalList;
				} else {
					return this.hospitalList.filter((item) => item?.title.indexOf(this.hospitalSearch) > -1);
				}
			},
		},
		methods: {
			onLoad() {
				this.page = 1;
				this.list = [];
				this.loading = true;
				this.finished = false;
				this.getList();
			},
			handleGoView(item) {
				this.$router.push({
					path: "/yskmenu",
					query: {
						id: item.id,
						title: item?.hospital?.title,
						order: item.order_sn,
						hospital_id: item?.hospital_id,
						path: "menu1",
					},
				});
			},
			handleDetail(item) {
				this.$router.push({
					path: "/collectionReview",
					query: {
						id: item.id,
						title: item?.hospital?.title,
					},
				});
			},
			setDirection() {
				if (this.order_direction == "desc") {
					this.order_direction = "asc";
				} else {
					this.order_direction = "desc";
				}
				this.onLoad();
			},
			// 加载更多
			loadPage() {
				if (this.list.length && this.list.length < this.total) {
					this.page += 1;
					this.getList();
				}
			},
			getList() {
				if (this.finished) return;
				this.loading = true;
				this.$api.no_pay_bill_lists({ page: this.page, area_id: this.area_id, hospital_id: this.hospital_id }).then((res) => {
					this.loading = false;
					this.list.push(...res.data.lists.data);
					this.total = res.data.no_pay_count;
					if (this.list.length >= this.total) this.finished = true;
				});
			},
			onConfirmArea(val) {
				this.showArea = false;
				this.curArea = val;
				this.area_id = val.id;
				this.hospital_id = "";
				this.curHospital = { id: "", title: "所有客户" };
				this.hospitalList = [{ id: "", title: "所有客户" }];
				this.getHospitals();
				this.onLoad();
			},
			onConfirmHospita(val) {
				this.showHospital = false;
				this.curHospital = val;
				this.hospital_id = val.id;
				this.onLoad();
			},
			getArea() {
				this.$api.user_area().then((res) => {
					if (res.code == 1) {
						this.areaList.push(...res.data);
					}
				});
			},
			getHospitals() {
				this.$api.area_hospitals({ area_id: this.area_id }).then((res) => {
					if (res.code == 1) {
						this.hospitalList.push(...res.data);
					}
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.menu-page {
		position: relative;
		z-index: 2;
		min-height: 100vh;
		background-color: #fff;

		.top-group {
			padding: 0 0.4rem;
			background-color: #50b1c1;
			height: 50px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 16px;
			color: #fff;
			position: sticky;
			top: 0;
			width: 100%;
			z-index: 1;

			.top-select {
				display: flex;
				align-items: center;
				max-width: 48%;

				p {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.van-icon {
					margin-left: 2px;
					font-size: 14px;
				}
			}
		}

		.table-top {
			padding: 0 0.4rem;
			background-color: #f6f6f6;
			height: 50px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 14px;
			color: #000;
			position: sticky;
			top: 50px;
			width: 100%;
			z-index: 1;
			border-bottom: 1px solid #e0e0e0;

			div {
				display: flex;
				align-items: center;

				&:nth-child(1) {
					width: 2.35rem;
				}

				&:nth-child(2) {
					width: 2.15rem;
				}

				&:nth-child(3) {
					width: 2.35rem;
				}

				&:nth-child(4) {
					width: 1.57rem;
				}

				.icon {
					width: 0.35rem;
					margin-left: 6px;
				}
			}
		}

		.table-wrapper {
			padding-bottom: 60px;

			.table-row {
				margin: 0 0.4rem;
				min-height: 50px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 12px;
				color: #000;
				position: sticky;
				top: 50px;
				width: calc(100% - 0.8rem);
				border-bottom: 1px solid #e0e0e0;

				div {
					word-break: break-all;

					&:nth-child(1) {
						width: 2.85rem;
						padding-right: 0.13rem;
					}

					&:nth-child(2) {
						width: 1.55rem;
						padding-right: 0.13rem;
					}

					&:nth-child(3) {
						width: 2.35rem;
						padding-right: 0.13rem;
					}

					&:nth-child(4) {
						width: 1.57rem;
						padding-right: 0.13rem;
					}

					&:nth-child(5) {
						color: #50b1c1;
					}
				}
			}

			.table-row-tool {
				padding: 0 0.4rem;
				min-height: 50px;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: fixed;
				bottom: 0;
				left: 0;
				width: 100%;
				border-top: 1px solid #e0e0e0;
				z-index: 1;
			}
		}
	}
</style>
